<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/vant@2.12.54.css" />
    <link rel="stylesheet" href="./css/video.css" />
    <link rel="stylesheet" href="./css/nav.css" />
    <style>
      .my-v-cloak {
  display: none;
}
    </style>
  </head>
  <body>
    <div class="video my-v-cloak" id="app" v-cloak>
      <div class="nav">
        <ul class="list">
          <li class="item" @click="goToindex">
            <img src="./img/ico1.png" alt="" />
            <span>首页</span>
          </li>
          <li class="item" @click="goToproduct">
            <img src="./img/ico2.png" alt="" />
            <span>产品列表</span>
          </li>
          <li class="item art" @click="goTovideo">
            <img src="./img/ico3_3.png" alt="" />
            <span>视频介绍</span>
          </li>
          <li class="item" @click="goTocontactus">
            <img src="./img/ico4.png" alt="" />
            <span>联系我们</span>
          </li>
        </ul>
      </div>

      <div class="list_1">
        <div class="centent">
          <div class="item" v-for="(item,index) in videoList">
            <div class="image" @click="showPopup(index)">
              <img :src="item.image.file_path" alt="" />
              <img src="./img/play.png" alt="" class="btn" />
            </div>
            <p class="f15">{{item.name}}</p>
          </div>
         
        </div>
      </div>

      <van-popup v-model="show" >
        <video :src="video" controls autoplay></video>
      </van-popup>
    </div>
  </body>
  <script src="./js/vue@2.7.14.js"></script>
  <script src="./js/element-ui@2.15.14.js"></script>
  <script src="./js/axios@1.5.0.min.js"></script>
  <script src="./js/vant@2.12.54.min.js"></script>
  <script src="./js/request.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          index:0,
          show: false,
          videoList:[],
          video:'',
          isLoaded:false
        };
      },
      created() {
        document.getElementById('app').classList.remove('my-v-cloak');
        this.fetchData();
        
        
      },

      beforeUpdate (){
        
      },

      methods: {
         //获取数据
         fetchData() {
          const url = baseUrl + "/goods.Goods/videoList";
          axios({
            url: url,
            method: "post",
            params: {
              app_id: 10001,
            },
          })
            .then((res) => {
              // 处理响应结果
              // this.options_1 = res.data.data;
              const index = this.index;
              this.videoList = res.data.data.list.data;
              this.video = res.data.data.list.data[index].video_url;
              
              console.log(this.video);
            })
            .catch((error) => {
              // 处理错误
              console.error(error);
            });
        },
        showPopup(index) {
          // console.log(index);
          this.index = index;
          this.fetchData();
          this.show = true;


        },
        goTocontactus() {
          window.location.href = "contactus.html";
        },
        goToindex() {
          window.location.href = "index.html";
        },
        goToproduct() {
          window.location.href = "product.html";
        },
        goTovideo() {
          window.location.href = "video.html";
        },
      },
    });
    Vue.use(vant);
  </script>
  <script>

  </script>
</html>
